/*
 * @Description: slick 旋转木马组件 图片轮播
 * @Author: kanglin
 * @Date: 2018-09-04 17:43:33
 * @Copyright: Created by Panxsoft.
 */

 <style lang="less" scoped rel="stylesheet/less" type="text/less" >
    @import '~src/assets/css/common.less';
    .v-com-slick.m-slick{
		position: relative;
		height: 170*@rem-per-px;
		.slick__list__box{
			width: 170*@rem-per-px;
			height: 170*@rem-per-px;
			display: inline-block;
			overflow: hidden;
			position: absolute;
			left: 50%;
			margin-left: -85*@rem-per-px;
		}

        .slick__list__box__list{
			display: inline-block;
			white-space: nowrap;
		}

		.slick__list__box__list__item{
			width: 170*@rem-per-px;
			height: 170*@rem-per-px;
			display: inline-block;
			// background: lavender;
			&>img{
				width: 100%;
			}
		}

		.slick__button-previous{
			left: 40 *@rem-per-px;
			background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/2.3.9/baogao_leftarrow_icon@2x.png');
		}

		.slick__button-next{
			right: 40 *@rem-per-px;
			background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/2.3.9/baogao_rightarrow_icon@2x.png');
		}

		.slick__button-previous,
		.slick__button-next{
			width: 52 *@rem-per-px;
			height: 52 *@rem-per-px;
			background-repeat: no-repeat;
			background-size: 100%;
			border: 0;
			background-color: transparent;
			top: 50%;
			position: absolute;
			margin-top: -26 *@rem-per-px;
			&:focus{
				outline: none;
			}
		}

    }
 </style>

<template>
	<div class="v-com-slick m-slick">
		<button
			class="slick__button-previous"
			@click="previous"/>
		<div class="slick__list__box">
			<ul
				:style="slick_list_style"
				class="slick__list__box__list">
				<li
					v-for="(item, index) in slick_list_data"
					:key="index"
					class="slick__list__box__list__item">
					<img
						:src="item"
						alt="">
				</li>
			</ul>
		</div>
		<button
			class="slick__button-next"
			@click="next"/>
	</div>
</template>

<script>
export default {
	name: 'MSlick',
	props: {
		data: {
			type: Array,
			default() {
				return [];
			},
		},
		index: {
			type: Number,
			required: true,
		},
	},
	data() {
		return {
			slick_list_style: {
				transform: 'translateX(0%)',
				transition: null,
			},
			slick_list_data: [],
			current_index: 1,
		};
	},
	watch: {
		index() {
			this.current_index = this.index + 1;
			this.resetTransLateX(this.current_index, this.slick_list_data.length, true);
		},
	},
	created() {
		this.init();
	},
	methods: {

		/**
		 * 初始化旋转木马数据
		 * @return {undefined}
		 */
		init() {
			this.current_index = this.index + 1;
			const first = this.data.length < 1 ? [] : [this.data[0]];
			const last = this.data.length < 1 ? [] : [this.data[this.data.length - 1]];
			this.slick_list_data = [...last, ...this.data, ...first];
			this.resetTransLateX(this.current_index, this.slick_list_data.length, true);
		},

		/**
		 * 切换上一页
		 * @return {undefined}
		 */
		previous() {
			if (this.current_index === 0) { // 重置ui:
				this.current_index = 4;
				this.resetTransLateX(this.current_index, this.slick_list_data.length);
			}
			this.current_index -= 1;
			window.setTimeout(() => {
				this.resetTransLateX(this.current_index, this.slick_list_data.length, true);
			}, 0);
			this.sendChangeEvent(this.current_index);
		},

		/**
		 * 切换下一页
		 * @return {undefined}
		 */
		next() {
			if (this.current_index === this.slick_list_data.length - 2) { // 重置ui:
				this.current_index = 0;
				this.resetTransLateX(this.current_index, this.slick_list_data.length);
			}
			this.current_index += 1;
			window.setTimeout(() => {
				this.resetTransLateX(this.current_index, this.slick_list_data.length, true);
			}, 0);
			this.sendChangeEvent(this.current_index);
		},

		sendChangeEvent(current_index) {
			const slick_list_data_item = this.slick_list_data[current_index];
			const item = this.data.indexOf(slick_list_data_item);
			this.$emit('change', item);
			this.$emit('update:index', item);
		},

		/**
		 *  是否在侧
		 * 	@param {number} index
		 *  @return {Boolean}
		 */
		isInLeftSide(index) {
			return index === 1;
		},

		/**
		 *  计算百分比
		 * @param {number} index
		 * @param {number} length
		 * @return {string} percent
		 */
		calculatePercent(index, length) {
			return `${-1 * (index / length) * 100}%`;
		},

		/**
		 *  重置transform样式
		 * @param {number} index
		 * @param {number} length
		 * @param {boolean}} hasAnimation
		 * @return {string} percent
		 */
		resetTransLateX(index, length, hasAnimation) {
			const percent = this.calculatePercent(index, length);
			const style = {
				transform: `translateX(${percent})`,
				transition: 'unset',
			};
			if (hasAnimation) {
				Object.assign(style, {
					transition: 'all 400ms ease 0s',
				});
			}
			this.slick_list_style = style;
		},

	},
};
</script>
